<template>
  <div class='container'>
    <el-form ref='form' :model='filterForm'>
      <el-form-item>
        <el-date-picker
          type='date'
          placeholder='选择开始日期'
          v-model='filterForm.startDate'
          format='yyyy-MM-dd'
          value-format='yyyy-MM-dd'
          style='width: 200px;'
        ></el-date-picker>
        <el-date-picker
          type='date'
          placeholder='选择结束日期'
          v-model='filterForm.endDate'
          format='yyyy-MM-dd'
          value-format='yyyy-MM-dd'
          style='width: 200px; margin-left: 10px;'
        ></el-date-picker>
        <el-select
          v-model='filterForm.name'
          :placeholder='filterForm.show1'
          @change='selectGet1'
          filterable
          clearable
          class='normal-input'
          style='width: 200px; margin-left: 10px;'
        >
          <el-option
            v-for='(item,index) in condition'
            :key='index'
            :label='item.name'
            :value='item.value'
          ></el-option>
        </el-select>
        <el-button
          class='filter-item'
          type='primary'
          plain
          icon='el-icon-search'
          @click='handleFilter(0)'
          style='margin-left: 10px;'
        >筛选</el-button>
        <el-button
          class='filter-item'
          type='primary'
          plain
          icon='el-icon-refresh'
          @click='handleFilter(1)'
          style='margin-left: 10px;'
        >重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data='orderList' v-loading="loading" border fit el-tabl stripe style='width: 100%;'>
      <el-table-column prop='id' align='center' label='编号' width='0' v-if='false'></el-table-column>
      <el-table-column prop='orderNum' align='center' label='订单编号' width='150'></el-table-column>
      <el-table-column prop='country' align='center' lmin-width='150px' label='外商国别' sortable></el-table-column>
      <el-table-column prop='orderDate' align='center' lmin-width='150px' label='订单日期' sortable></el-table-column>
      <el-table-column prop='deliveryDate' align='center' lmin-width='150px' label='交货日期' sortable></el-table-column>
      <el-table-column prop='customs' align='center' lmin-width='150px' label='报关地海关' sortable></el-table-column>
      <el-table-column prop='amount' align='center' lmin-width='150px' label='总金额' sortable></el-table-column>
      <el-table-column prop='currency' align='center' min-width='100px' label='币种' sortable></el-table-column>
      <el-table-column
        prop='status'
        align='center'
        min-width='100px'
        label='状态'
        :filter-method='filterTag'
        :filters="[{ text: '在手订单', value: '在手订单' }, { text: '出货订单', value: '出货订单' }]"
        filter-placement='bottom-end'
      >
        <template slot-scope='scope'>
          <el-tag
            :type="scope.row.status === '在手订单' ? 'success' : 'warning'"
            disable-transitions
          >{{scope.row.status}}</el-tag>
        </template>>
      </el-table-column>
      <el-table-column prop='status' align='center' lmin-width='100px' label='操作'>
        <template slot-scope='scope'>
          <el-button size='small' type='primary' plain @click='handleView(scope.row)'>详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class='pagination-container'>
      <el-pagination
        background
        layout='total, prev, pager, next'
        :total='total'
        :page-count='count'
        :page-size='size'
        :current-page='pageCurrent'
        @current-change='handleCurrentChange'
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getOrderList, getOrderConditionSearch } from '@/api/order';
import { getConditionListALL } from '@/api/condition';

export default {
  name: 'Orderlist',
  data() {
    return {
      filterForm: {
        startDate: '',
        endDate: '',
        name: '',
        nameKey: '',
        show1: '获取数据中，请稍后...'
      },
      condition: [],
      orderList: [],
      filter: false,
      total: 0,
      count: 0,
      pageCurrent: 1,
      size: 1,
      loading: true
    };
  },
  created() {
    // //初始化列表
    this.initCondChange();
  },
  watch: {
    $route(to, from) {
      // //初始化列表
      this.initCondChange();
    }
  },
  methods: {
    selectGet1(vId) {
      let obj = {};
      obj = this.condition.find(item => {
        return item.value === vId;
      });
      if (obj != null) {
        this.filterForm.nameKey = obj.key;
      } else {
        this.filterForm.nameKey = obj.value;
      }
    },
    filterTag(value, row) {
      return row.status === value;
    },
    handleFilter(type) {
      //搜索数据
      if (type == 0) {
        this.filter = true;
        this.getOrderSearch('1');
      } else {
        this.filter = false;
        this.filterForm.name = '';
        this.filterForm.nameKey = '';
        this.filterForm.startDate = '';
        this.filterForm.endDate = '';
        this.getOrderInfoList('1');
      }
    },
    handleCurrentChange: function(pageSize) {
      if (this.filter == true) {
        this.getOrderSearch(pageSize);
      } else {
        this.getOrderInfoList(pageSize);
      }
    },
    handleView(row) {
      localStorage.setItem('orderID', row.id);
      this.$router.push({ path: '/orderDetail', query: { id: row.id } });
    },
    initCondChange() {
      let that = this;
      getConditionListALL()
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            that.condition = [];
            //加入数据内容
            for (let i of myData) {
              var map = {
                key: i.id,
                value: i.conditionName
              };
              that.condition.push(map);
            }
            that.filterForm.show1 = '请选择需要筛选的重点条件';
          }else{
              that.filterForm.show1 = '您尚未设置重点条件';
          }
          that.getOrderInfoList('1');
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    },
    getOrderInfoList(page) {
      let that = this;
      //刷新页面
      that.loading = true;
      getOrderList(page)
        .then(data => {
          that.loading = false;
          var myData = data.data;
          if (myData.length <= 0) {
            var lenth = that.orderList.length;
            that.orderList.splice(0, lenth);
          } else {
            lenth = that.orderList.length;
            that.orderList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                orderNum: i.orderCodeGov,
                computerName: i.companyHsName,
                country: i.foreignCountry,
                orderDate: i.orderTime,
                deliveryDate: i.deliveryTime,
                customs: i.declareCustoms,
                amount: i.totalPrice,
                currency: i.orderCurrency,
                status: i.applicationState == '1' ? '在手订单' : '出货订单'
              };
              that.orderList.push(map);
            }
            var page = data.page;
            that.total = page.resultCount;
            that.count = page.pageCount;
            that.pageCurrent = page.pageCurrent;
            that.size = page.pageLimit;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    },
    getOrderSearch(page) {
      let that = this;
      that.loading = true;
      getOrderConditionSearch(
        that.filterForm.startDate,
        that.filterForm.endDate,
        that.filterForm.nameKey,
        page
      )
        .then(data => {
          that.loading = false;
          var myData = data.data;
          if (myData.length <= 0) {
            var lenth = this.orderList.length;
            that.orderList.splice(0, lenth);
            that.total = 0;
            that.count = 0;
            that.pageCurrent = 0;
            that.size = 0;
          } else {
            lenth = this.orderList.length;
            that.orderList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                orderNum: i.orderCodeGov,
                computerName: i.companyHsName,
                country: i.foreignCountry,
                orderDate: i.orderTime,
                deliveryDate: i.deliveryTime,
                customs: i.declareCustoms,
                amount: i.totalPrice,
                currency: i.orderCurrency,
                status: i.applicationState == '1' ? '在手订单' : '出货订单'
              };
              that.orderList.push(map);
            }
            var page = data.page;
            that.total = page.resultCount;
            that.count = page.pageCount;
            that.pageCurrent = page.pageCurrent;
            that.size = page.pageLimit;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    }
  }
};
</script>
<style>
</style>
